<route lang="jsonc" type="page">{
  "layout": "tabbar",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "我的"
  }
}</route>

<script setup lang="ts">
import type { UserXxi } from '@/api/my/my'
import { ref } from 'vue'
import { getUserInfo } from '@/api/my/my'

// 用户数据
const myUser = ref<UserXxi>({
  code: '',
  message: '',
  data: {
    id: '',
    avatar: '',
    mobile: '',
    account: '',
    likeNumber: 0,
    collectionNumber: 0,
    score: 0,
    couponNumber: 0,
    consultationInfo: [
      {
        id: '',
        name: '',
        avatar: '',
        depName: '',
        positionalTitles: '',
        hospitalName: '',
        gradeName: '',
        orderId: '',
      },
    ],
    orderInfo: {
      paidNumber: 0,
      receivedNumber: 0,
      shippedNumber: 0,
      finishedNumber: 0,
    },
  },
})

// 获取用户数据
async function fetchUserData() {
  const res = await getUserInfo();
  console.log('接口返回数据:', res); // 检查返回的数据结构

  if (res.code === 10000) {
    // 确保数据结构完整
    myUser.value = {
      ...myUser.value, // 保留初始值
      data: {
        ...res.data,
        orderInfo: res.data.orderInfo || { // 如果orderInfo不存在，给默认值
          paidNumber: 0,
          receivedNumber: 0,
          shippedNumber: 0,
          finishedNumber: 0
        },
        consultationInfo: [
          {
            id: '',
            name: '',
            avatar: '',
            depName: '',
            positionalTitles: '',
            hospitalName: '',
            gradeName: '',
            orderId: ''
          }
        ],
      }
    };
  }
}
onLoad(() => {
  fetchUserData()
})

// 跳转到咨询页面
function goToConsult() {
  uni.navigateTo({
    url: '/pages/consult/consult',
  })
}

// 其他跳转路径
function goToMyConsult() {
  uni.navigateTo({
    url: '/pages/Wenzhen/Wenzhen',
  })
}

function goToMyPrescription() {
  uni.navigateTo({
    url: '/pages/prescription/prescription',
  })
}

function goToFamilyArchive() {
  uni.navigateTo({
    url: '/pages/patientSelect/patientSelect',
  })
}

function goToAddressManage() {
  uni.navigateTo({
    url: '/pages/address/address',
  })
}

function goToMyEvaluation() {
  uni.navigateTo({
    url: '/pages/evaluation/evaluation',
  })
}

function goToCustomerService() {
  uni.navigateTo({
    url: '/pages/customerService/customerService',
  })
}

function goToSettings() {
  uni.navigateTo({
    url: '/pages/settings/settings',
  })
}

// 退出登录
function logout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 执行退出登录逻辑
        // clearToken()
        uni.reLaunch({
          url: '/pages/login/login',
        })
      }
    },
  })
}
</script>

<template>
  <!-- 用户信息区域 -->
  <view class="user-container">
    <!-- 头像及用户名区域 -->
    <view class="user-header">
      <image class="avatar" :src="myUser.data.avatar" />
      <view class="user-name">
        <view class="nickname">
          {{ myUser.data.account }}
        </view>
        <view>
          <image class="edit-icon" src="/static/images/1.png" />
        </view>
      </view>
    </view>

    <!-- 数据统计区域 -->
    <view class="stats">
      <view class="stat-item">
        <text class="stat-value">{{ myUser.data.collectionNumber }}</text>
        <text class="stat-label">收藏</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ myUser.data.likeNumber }}</text>
        <text class="stat-label">关注</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ myUser.data.score }}</text>
        <text class="stat-label">积分</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ myUser.data.couponNumber }}</text>
        <text class="stat-label">优惠券</text>
      </view>
    </view>
  </view>

  <!-- 问诊卡片 -->
  <view class="card-container">
    <view class="card-title">
      问诊中
    </view>
    <view class="doctor-info">
      <image class="doctor-avatar" :src="myUser.data.consultationInfo[0].avatar" />
      <view class="doctor-details">
        <view class="name-and-title">
          <text class="doctor-name">{{myUser.data.consultationInfo[0].name}}</text>
          <view class="department-title">
            {{myUser.data.consultationInfo[0].depName}} | {{ myUser.data.consultationInfo[0].positionalTitles }}
          </view>
        </view>
        <view class="hospital-info">
          <text class="hospital-tag">{{ myUser.data.consultationInfo[0].gradeName }}</text>
          <text class="hospital-name">{{myUser.data.consultationInfo[0].hospitalName}} </text>
        </view>
      </view>
      <button class="consult-btn" @click="goToConsult">
        进入咨询
      </button>
    </view>
    <view class="progress-dots">
      <view class="dot active" />
      <view class="dot" />
    </view>
  </view>

  <!-- <view v-if="myUser.data.consultationInfo.length > 0" class="card-container">
    <view class="card-title">
      问诊中
    </view>
    <view class="doctor-info">
      <image class="doctor-avatar" :src="myUser.data.consultationInfo[0].avatar" />
      <view class="doctor-details">
        <view class="name-and-title">
          <text class="doctor-name">{{ myUser.data.consultationInfo[0].name }}</text>
          <view class="department-title">
            {{ myUser.data.consultationInfo[0].namedepName }} |
            {{ myUser.data.consultationInfo[0].positionalTitles }}
          </view>
        </view>
        <view class="hospital-info">
          <text class="hospital-tag">
            {{ myUser.data.consultationInfo[0].gradeName }}
          </text>
          <text class="hospital-name">
            {{ myUser.data.consultationInfo[0].hospitalName }}
          </text>
        </view>
      </view>
      <button class="consult-btn" @click="goToConsult">
        进入咨询
      </button>
    </view>
    <view class="progress-dots">
      <view class="dot active" />
      <view class="dot" />
    </view>
  </view> -->

  <!-- 订单区域 -->
  <view class="order-container">
    <view class="order-header">
      <text class="order-title">药品订单</text>
      <navigator url="/pages/allOrders/allOrders" class="all-orders">
        全部订单
        <image class="arrow-icon" src="/static/images/right1.png" />
      </navigator>
    </view>
    <view class="order-types">
      <view class="type-item">
        <image class="type-icon" src="/static/images/To_be_paid@1x.png" />
        <view v-if="myUser.data.orderInfo.paidNumber > 0" class="badge">
          {{ myUser.data.orderInfo.paidNumber }}
        </view>
        <text class="type-text">待付款</text>
      </view>
      <view class="type-item">
        <image class="type-icon" src="/static/images/To_be_shipped@1x.png" />
        <view v-if="myUser.data.orderInfo.receivedNumber > 0" class="badge">
          {{ myUser.data.orderInfo.receivedNumber }}
        </view>
        <text class="type-text">待发货</text>
      </view>
      <view class="type-item">
        <image class="type-icon" src="/static/images/To_be_received@1x.png" />
        <view v-if="myUser.data.orderInfo.shippedNumber > 0" class="badge">
          {{ myUser.data.orderInfo.shippedNumber }}
        </view>
        <text class="type-text">待收货</text>
      </view>
      <view class="type-item">
        <image class="type-icon" src="/static/images/finished@1x.png" />
        <view class="badge">
          8
        </view>
        <text class="type-text">已完成</text>
      </view>
    </view>
  </view>

  <!-- 快捷工具区域 -->
  <view class="tools-container">
    <view class="tools-title">
      快捷工具
    </view>
    <view class="tools-list">
      <navigator url="/pages/Wenzhen/Wenzhen">
        <view class="tool-item" @click="goToMyConsult">
          <image class="tool-icon" src="/static/images/customer_service@1x.png" />
          <text class="tool-text">我的问诊</text>
          <image class="arrow-icon" src="/static/images/right1.png" />
        </view>
      </navigator>
      <view class="tool-item" @click="goToMyPrescription">
        <image class="tool-icon" src="/static/images/customer_service@1x.png" />
        <text class="tool-text">我的处方</text>
        <image class="arrow-icon" src="/static/images/right1.png" />
      </view>
      <navigator url="/pages/patientSelect/patientSelect">
        <view class="tool-item" @click="goToFamilyArchive">
          <image class="tool-icon" src="/static/images/customer_service@1x.png" />
          <text class="tool-text">家庭档案</text>
          <image class="arrow-icon" src="/static/images/right1.png" />
        </view>
      </navigator>
      <view class="tool-item" @click="goToAddressManage">
        <image class="tool-icon" src="/static/images/customer_service@1x.png" />
        <text class="tool-text">地址管理</text>
        <image class="arrow-icon" src="/static/images/right1.png" />
      </view>
      <view class="tool-item" @click="goToMyEvaluation">
        <image class="tool-icon" src="/static/images/customer_service@1x.png" />
        <text class="tool-text">我的评价</text>
        <image class="arrow-icon" src="/static/images/right1.png" />
      </view>
      <view class="tool-item" @click="goToCustomerService">
        <image class="tool-icon" src="/static/images/customer_service@1x.png" />
        <text class="tool-text">官方客服</text>
        <image class="arrow-icon" src="/static/images/right1.png" />
      </view>
      <view class="tool-item" @click="goToSettings">
        <image class="tool-icon" src="/static/images/customer_service@1x.png" />
        <text class="tool-text">设置</text>
        <image class="arrow-icon" src="/static/images/right1.png" />
      </view>
    </view>
  </view>

  <!-- 退出登录按钮 -->
  <view class="delToken" @click="logout">
    退出登录
  </view>
</template>

<style lang="scss" scoped>
/* 用户容器 */
.user-container {
  width: 100%;
  height: 476rpx;
  // background-color: #2CB5A5;
  background: linear-gradient(180deg, #adddd7 0%, #ffffff 100%);
  padding: 176rpx 0 16rpx 25rpx;
}

/* 用户头部 */
.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 138rpx;
  height: 138rpx;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 12rpx;
}

.user-name {
  // display: flex;
  // background-color: pink;
  align-items: center;
}

.nickname {
  font-size: 36rpx;
  margin-right: 8rpx;
}

.edit-icon {
  width: 18rpx;
  height: 18rpx;
}

/* 统计数据 */
.stats {
  // width: 100%;
  height: 82rpx;
  // background-color: #409eff;
  display: flex;
  justify-content: space-around;
}

.stat-item {
  width: 187rpx;
  height: 82rpx;
  text-align: center;
}

.stat-value {
  font-size: 38rpx;
  display: block;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 卡片容器 */
.card-container {
  width: 690rpx;
  height: 268rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 32rpx;
  padding: 30rpx;
  // margin: 30rpx 0 40rpx 30rpx;
  color: #000000;
  font-family: PingFang SC;
  font-weight: 500;
  // line-height: 48rpx;
}

/* 医生信息 */
.doctor-info {
  display: flex;
  width: 100%;
  height: 135rpx;
}

.doctor-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  // background-color: pink;
  margin: 0 20rpx;
}

.doctor-details {
  flex: 1;
  width: 350rpx;
  height: 150rpx;
}

.name-and-title {
  display: flex;
  align-items: center;
  margin-bottom: 4rpx;
  width: 350rpx;
  height: 50rpx;
}

.doctor-name {
  color: #3c3e42;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  line-height: 48rpx;
}

.department-title {
  color: #6f6f6f;
  font-family: PingFang SC;
  font-size: 24rpx;
  line-height: 40rpx;
  margin-left: 10rpx;
}

.hospital-info {
  display: flex;
  align-items: center;
  width: 350rpx;
  height: 45rpx;
}

.hospital-tag {
  background-color: #677fff;
  color: #fff;
  // padding: 2rpx 6rpx;
  border-radius: 4rpx;
  margin-right: 6rpx;
  font-family: PingFang SC;
  font-size: 18rpx;
  width: 36rpx;
  height: 28rpx;
  line-height: 28rpx;
}

.hospital-name {
  color: #3c3e42;
  font-family: PingFang SC;
  font-size: 24rpx;
  line-height: 14rpx;
}

.consult-btn {
  width: 152rpx;
  height: 58rpx;
  line-height: 58rpx;
  border-radius: 50rpx;
  background: rgba(44, 181, 165, 0.1);
  color: #2cb5a5;
  font-family: PingFang SC;
  font-size: 24rpx;
  // line-height: 40rpx;
  margin-right: 20rpx;
  border: none;
}

/* 进度点 */
.progress-dots {
  display: flex;
  justify-content: center;
  margin-top: 12rpx;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 4rpx;
}

.dot.active {
  background-color: #00bfa5;
}

/* 订单容器 */
.order-container {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 690rpx;
  // border: 1px solid #d9d9d9;
  border-radius: 8rpx;
  padding: 30rpx;
  height: 248rpx;
  margin: 30rpx auto 0;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-title {
  color: #000000;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 48rpx;
}

.all-orders {
  color: #c3c3c5;
  font-family: PingFang SC;
  font-size: 26rpx;
  line-height: 48rpx;
  display: flex;
  align-items: center;
}

.arrow-icon {
  width: 30rpx;
  height: 30rpx;
}

.order-types {
  width: 100%;
  height: 130rpx;
  // background-color: #00bfa5;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  // padding: 0 10rpx;
}

.type-icon {
  width: 54rpx;
  height: 54rpx;
  margin: 35rpx 0 8rpx;
}

.type-text {
  color: #3c3e42;
  font-family: PingFang SC;
  font-size: 24rpx;
  line-height: 36rpx;
}

/* 徽标样式 */
.badge {
  position: absolute;
  top: 30rpx;
  right: 10rpx;
  background-color: #f5222d;
  color: #fff;
  font-size: 12rpx;
  min-width: 16rpx;
  height: 16rpx;
  line-height: 16rpx;
  border-radius: 50%;
  text-align: center;
  padding: 0;
}

/* 工具容器 */
.tools-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 32rpx;
  width: 690rpx;
  margin: 30rpx auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tools-title {
  color: #000000;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 48rpx;
}

.tools-list {
  width: 100%;
  border-top: 1rpx solid #f5f5f5;
  margin-top: 20rpx;
}

.tool-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.tool-icon {
  width: 28rpx;
  height: 30rpx;
  margin-right: 24rpx;
}

.tool-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.arrow-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 退出登录 */
.delToken {
  font-size: 28rpx;
  color: #eb5757;
  width: 100%;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
